<template>
  <div class="linear-plus" v-if="list">
    <div class="linear-plus-main">
      <div class="left_tab">{{ list.leftTabs[0].title }}</div>
      <div class="mid_tab">
        <div class="mid_tab-left">
          <img :src="list.midTabs[0].imageUrl" alt="" />
        </div>
        <div class="mid_tab-right">
          <p>{{ list.midTabs[0].title }}</p>
          <p>{{ list.midTabs[0].subTitle }}</p>
        </div>
      </div>
      <div class="right_tab">
        <div class="mid_tab-left">
          <img :src="list.rightTabs[0].imageUrl" alt="" />
        </div>
        <div class="mid_tab-right">
          <p>{{ list.rightTabs[0].title }}</p>
          <p>{{ list.rightTabs[0].subTitle }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineProps(['list'])
</script>

<style scoped>
.linear-plus {
  height: 56px;
  margin-top: 6px;
  font-size: 12px;
  color: rgb(153, 99, 0);
}
.linear-plus-main {
  box-sizing: border-box;
  display: flex;
  margin: 0 10px;
  background: url(https://img12.360buyimg.com/img/s710x112_jfs/t1/218756/14/17440/17581/62594161Ede372cef/9a54eb4e9a4a9b85.png)
    no-repeat 50%;
  background-size: 100% 100%;
}
.linear-plus-main > div {
  height: 39px;
  padding-top: 15px;
  padding-left: 30px;
  display: flex;
  text-align: center;
}

.mid_tab-left > img {
  width: 30px;
}
.mid_tab-right {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding-left: 4px;
}
.mid_tab-right > p {
  padding: 0;
  margin: 0;
}
.mid_tab-right > p:nth-child(1) {
  font-size: 14px;
}

.left_tab{
  text-align: center;
  line-height: 40px;
  
}
</style>
